<template>
	<view>
		
		<view class="bg_box">
			<image class="bg01" :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'bg05.png'" mode="widthFix"></image>
			<view class="bg_content status_bar">
				
				<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
					<view class="back iconfont icon-xiangzuo1" @tap.stop="backPage"></view>
					<view class="text">我的订单</view>
				</view>
				

					<view class="nav" :class="scrrol == true ? 'scrrolHeader' : ''">
						<view class="navauto">
							<block v-for="(item, index) in menu" :key="index">
								<view class="menu" :data-index="index" @tap="setNavMenu">
									<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
									<view class="line" :class="index == select ? 'menucolor02' : ''">
										<image :src="'https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/' + 'xiao.png'" mode="widthFix"></image>
									</view>
								</view>
							</block>
						</view>
					</view>

				<view class="clear_box07"></view>
				
				

				
				<block v-for="(item, index) in goods" :key="'goods' + index">
					<view class="content" v-if="select == 0||select == 1&&item.order_status == 1||select == 2&&item.order_status == 2||select == 3&&item.order_status == 3||select == 4&&item.order_status == 4||select == 4&&item.order_status == 4||select == 5&&item.order_status == 6||select == 5">
						<view class="order_box">
							<view class="shop">{{item.order_no}}</view>
							<view class="state" v-if="item.order_status == 0">订单已取消</view>
							<view class="state" v-if="item.order_status == 2">等待发货</view>
							<view class="state" v-if="item.order_status == 3">等待收货</view>
							<view class="state" v-if="item.order_status == 1">等待支付</view>
							<view class="state" v-if="item.order_status == 4">订单完成</view>
							<view class="state" v-if="item.order_status == 5">{{item.order_status_cn}}</view>
							<view class="state" v-if="item.order_status == 6">订单完成</view>
							<view class="state" v-if="item.order_status == 7">配送中</view>
						</view>
						<view class="goods_box" :data-url="'/pages/order/details?id='+item.id+'&state='+item.order_status" @click="gotopage">
							<image class="goods_img" :src="item.order_goods[0].goods_image" mode="scaleToFill"></image>
							<view class="text_box">
								<view class="title">{{item.order_goods[0].goods_name}}</view>
								<view class="money_box">
									<view class="money">￥{{item.order_goods[0].total_price}}</view>
									<view class="num">x{{item.order_goods[0].buy_num ||'1'}}</view>
								</view>
								<view class="actual_box">
									<view class="num">共{{item.order_goods[0].buy_num ||'1'}}件商品</view>
									<view class="text">实付款</view>
									<view class="actual">￥{{item.total_price}}</view>
								</view>
							</view>
						</view>
				
						<view class="menu_box">
							<view class="menu menu02" v-if="item.order_status == 0">{{item.order_status_cn}}</view>
							<view class="menu menu02" v-if="item.order_status == 1" @click.stop="cancel" :data-id="item.id">取消订单</view>
							<view class="menu menu02" v-if="item.order_status == 2" @click.stop="cancel02" :data-id="item.id">退款</view>
							<view class="menu" v-if="item.order_status == 1" :data-url="'/pages/order/orderpay?id='+item.id" @click.stop="gotopage">去支付</view>
							<!-- <view class="menu" v-if="item.order_status == 2" @click.stop="remaind" :data-id="item.id">提醒发货</view> -->
							<!-- <view class="menu" v-if="item.order_status == 3">再次购买</view> -->
							<view class="menu menu02" v-if="item.order_status == 3 || item.order_status == 4 || item.order_status == 6" :data-url="'/pages/order/logistics?id='+item.id" @click.stop="gotopage">查看物流</view>
							<view class="menu" v-if="item.order_status == 3" @click.stop="receiving" :data-id="item.id">确认收货</view>			
							<!-- <view class="menu" v-if="item.order_status == 4" :data-url="'/pages/order/evaluate?item=' + JSON.stringify(item)" @click.stop="gotopage">去评价</view> -->
							<!-- <view class="menu menu02" v-if="item.order_status == 3 && item.refundable == 1 || item.order_status == 4 && item.refundable == 1 || item.order_status == 5 && item.refund_status == 1|| item.order_status == 6 && item.refundable == 1" :data-url="'/pages/order/apply?id=' + item.id + '&type=' + 2" @click.stop="gotopage">申请售后</view> -->
							<view class="menu" v-if="item.order_status == 5">{{item.order_status_cn}}</view>
							<!-- <view class="menu" v-if="item.order_status == 6 || item.order_status == 0" :data-url="'/pages/nearby/particulars?id='+item.order_goods[0].goods_id" @click.stop="gotopage">再来一单</view> -->
							
							
						</view>
					</view>
				</block>
				

			
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol:false,
				select: 0,
				allSelect:0,
				page: 1,
				status: -1,
				select02: 0,
				status02: -1,
				allMenu: [
					{
						text: '跑腿订单'
					},
					{
						text: '线上订单'
					},
				],
				menu: [
					{
						text: '全部'
					},
					{
						text: '待付款'
					},
					{
						text: '待发货'
					},
					{
						text: '待收货'
					},
					// {
					// 	text: '待评价'
					// }
				],
				menu02: [
					{
						text: '全部'
					},
					{
						text: '已下单'
					},
					{
						text: '待上门'
					},
					{
						text: '服务中'
					},
					{
						text: '已完成'
					}
				],
				goods:[],
				list:[],
			}
		},
		onShow() {
			let that = this;
			that.page = 1;	
			that.loadData();
			
		},
		onLoad(e) {
			let that = this;

			
		},
		methods: {
			loadData() {
			  let that = this;
			  that.Net._get('user/orders?isResource=Home',{per_page:'10',page:that.page,order_status:that.status,order_type:4}, res => {
			    if(res.code == 200){
			      that.goods = res.data.data;
			    }
			  });
			},
			setAllNavMenu(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.allSelect = index;
				that.page = 1;
				if(that.allSelect == 0){
					
				}else if(that.allSelect == 1){
					that.loadData();
				}
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.status = index;
				if (index == 0){
				  that.status = -1;
				}
				if (index == 5){
				  that.status = 6;
				}
				that.page = 1;
				that.loadData();
				
			},
			// 退款
			cancel02(e) {
			  let that = this;
			  let id = e.currentTarget.dataset.id;
				uni.showModal({
				    title: '提示',
				    content: '是否退款',
				    success: function (res) {
				      if (res.confirm) {
				        that.Net._post('user/order/refund', { order_id: id,refund_type:0,refund_remark:'',status:'1'}, res => {
				          if (res.code == 200) {
				            that.Msg.Success('退款已申请', res => {
				        			that.page = 1;
				              that.loadData();
				            });
				          } else if (res.code != 200) {
				            that.Msg.Success(res.msg, res => {});
				          }
				        });
							
				      } else if (res.cancel) {
				        //console.log('用户点击取消');
				      }
				    }
				});
			},
			
			// 取消订单
			cancel(e) {
			  let that = this;
			  let id = e.currentTarget.dataset.id;
			  uni.showModal({
			      title: '提示',
			      content: '是否取消订单',
			      success: function (res) {
			        if (res.confirm) {
			          that.Net._put('user/order/'+id, { id: id,order_status:0}, res => {
			            if (res.code == 200) {
			              that.Msg.Success('订单已取消', res => {
			          			that.page = 1;
			                that.loadData();
			              });
			            } else if (res.code != 200) {
			              that.Msg.Success(res.msg, res => {});
			            }
			          });
			  			
			        } else if (res.cancel) {
			          //console.log('用户点击取消');
			        }
			      }
			  });
			},
			
			// 提醒发货
			remaind(e) {
			  let that = this;
			  let id = e.currentTarget.dataset.id;
			  that.Net._get('order/remind_deliver', { id: id}, res => {
			    if (res.code == 200) {
			      that.Msg.Success('提醒成功', res => {
							that.page = 1;
			        that.loadData();
			      });
			    } else if (res.code != 200) {
			      console.log(res.msg)
			      that.Msg.Success(res.msg, res => {});
			    }
			  });
			},
			
			// 确认收货
			receiving(e) {
				let that = this;
				let id = e.currentTarget.dataset.id;
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.Net._put('user/order/'+id, { order_status: 4}, res => {
							  if (res.code == 200) {
							    that.Msg.Success('操作成功', res => {
										that.page = 1;
							      that.loadData();
							    });
							  } else if (res.code != 200) {
							    console.log(res.msg)
							    that.Msg.Success(res.msg, res => {});
							  }
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 25) {
				this.scrrol = true;
			} else if (Object.scrollTop < 25) {
				this.scrrol = false;
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.page = 1;

			that.goods = [];
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
			that.Net._get('user/orders?isResource=Home', {per_page:'10',page:that.page,status:that.status,order_type:1}, res => {
			  if (res.code == 200) {
			    //console.log(res)
			    if (res.data.data == '') {
			      uni.showToast({
			        title: '已经是最后一页了',
			        duration: 2000,
			        icon: 'none'
			      });
			    } else {
			      that.goods = that.goods.concat(res.data.data); //将数据拼接在一起
			    }
			  } else if (res.code == 0) {
			    that.Msg.Success(res.msg, res => {});
			  }
			});
		  
		},
	}
</script>

<style>
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent;
	}
	.clear_box07{
		height: calc(26.5vw + var(--status-bar-height));
	}
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
		display: block;
	}
	
	.bg_box .bg_content{
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		padding-bottom: 15vw;
	}
	
	.type_nav_box{
		width: 100%;
		position: fixed;
		left: 0;
		top: calc(0vw + var(--status-bar-height));
		z-index: 999;
		padding-top: 3vw;
		padding-left: 4%;
		box-sizing: border-box;
	}
	
	.type_nav{
		width: 50%;
		height: 10vw;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border: 1px solid #FF9822;
		border-radius: 2vw;
	}
	
	.type_nav .menu{
		flex: 1;
		color: #333;
		text-align: center;
		line-height: 10vw;
		
	}
	
	.type_nav .menu:nth-child(1){
		border-radius: 2vw 0 0 2vw;
	}
	
	.type_nav .menu:nth-child(2){
		border-radius: 0 2vw 2vw 0;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 25%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #333;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 20%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 10%);
		bottom: 0vw;
		display: none;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.5vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.content {
		width: 94%;
		margin: 0 auto;
		background: #fff;
		border-radius: 1.5vw;
		margin-top: 3%;
		padding-top: 3vw;
	}
	
	.content .order_box {
		width: 100%;
		height: 8vw;
		display: flex;
	}
	
	.content .order_box .shop {
		font-size: 3.5vw;
		color: #666;
		flex: 1;
		display: flex;
		margin-left: 3vw;
		line-height: 8vw;
	}
	
	.content .order_box .shop .icon {
		font-size: 5vw;
		margin-right: 1.5vw;
		font-weight: 400;
	}
	
	.content .order_box .state {
		font-size: 3.5vw;
		color: #FD3633;
		margin-right: 3vw;
		line-height: 8vw;
	}
	
	.content .goods_box {
		width: 100%;
		margin-top: 3vw;
		display: flex;
	}
	
	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}
	
	.content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}
	
	.content .goods_box .text_box .title {
		height: 11vw;
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.content .goods_box .text_box .money_box{
		display: flex;
		margin-top: 1vw;
	}
	
	.content .goods_box .text_box .money_box .money{
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
	}
	
	.content .goods_box .text_box .money_box .num{
		font-size: 3vw;
		color: #999;
		flex: 1;
		text-align: right;
		line-height: 6vw;
	}
	
	.content .goods_box .text_box .actual_box{
		display: flex;
		justify-content: flex-end;
		margin-top: 1vw;
	}
	
	.content .goods_box .text_box .actual_box .num{
		font-size: 3vw;
		color: #999;
		line-height: 6vw;
		margin-right: 2vw;
	}
	
	.content .goods_box .text_box .actual_box .text{
		font-size: 3vw;
		color: #333;
		line-height: 6vw;
		margin-right: 1vw;
	}
	
	.content .goods_box .text_box .actual_box .actual{
		font-size: 3.5vw;
		color: #FD3633;
		line-height: 6vw;
	}
	
	.content .menu_box {
		width: 96%;
		margin: 0 auto;
		height: 13.5vw;
		display: flex;
		justify-content: flex-end;
		position: relative;
	}
	
	.content .menu_box .text{
		flex: 1;
		text-align: left;
		font-size: 3.5vw;
		color: #FD3633;
		line-height: 13.5vw;
	}
	
	.content .menu_box .menu {
		width: 24vw;
		height: 8vw;
		background-color: #FF7F22;
		box-sizing: border-box;
		margin-top: 3vw;
		margin-left: 2vw;
		border-radius: 1.5vw;
		line-height: 7.5vw;
		text-align: center;
		font-size: 3.5vw;
		color: #fff;
		
	}
	
	.content .menu_box .menu02 {
		border: 1px solid #999 !important;
		color: #999 !important;
		background-color: transparent !important;
	}
	
	.content .menu_box .menu03 {
		position: absolute;
		left: 0.3vw;
		display: flex;
	}
	
	.content .menu_box .menu03 .i {
		font-size: 6vw;
		color: #f72f4b;
		line-height: 13.5vw;
		margin-right: 1.5vw;
	}
	
	.content .menu_box .menu03 .t {
		font-size: 3vw;
		color: #333;
		line-height: 13.5vw;
	}
	
	.content .menu_box .reward{
		position: absolute;
		left: 1vw;
		top: 0;
		display: flex;
	}
	
	.content .menu_box .reward .icon{
		width: 8vw;
		display: flex;
		align-items: center;
	}
	
	.content .menu_box .reward .icon image{
		width: 100%;
	}
	
	.content .menu_box .reward .text{
		font-size: 3vw;
		color: #999;
		line-height: 13.5vw;
		margin: 0 1vw 0 1.5vw
	}
	
	.content .menu_box .reward .money{
		font-size: 3vw;
		color: #FD3633;
		line-height: 13.5vw;
	}
	
	.scrrolHeader {
		background-color: #fff !important;
		border-bottom: 1px solid #e8e8e8 !important;
	}
	
	.scrrolHeader {
		background-color: #fef2e6 !important;
		border-bottom: 1px solid #e8e8e8 !important;
	}
	
	.scrrolHeader02 {
		background-color: #fef2e6 !important;
	}
	
	
</style>
